<template>
	<view class="tabPage">
		<view>首页</view>
		<view>关注</view>
		<view><text class="iconfont icontianjia"></text></view>
		<view>消息</view>
		<view>我</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {};
		},
		onLoad() {},
		methods: {},
	}
</script>
<style lang="scss" scoped>
	.tabPage {
		width: 100%;
		height: 100rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		display: grid;
		grid-template-columns: repeat(5, 1fr);
		place-items: center;
		background-color: #000;
		color: #FFFFFF;
		box-shadow: 0rpx -1rpx 6rpx #000;

		>view {
			font-size: 40rpx;
			letter-spacing: 4rpx;

			&:nth-of-type(3) {
				background-color: #FFFFFF;
				width: 100rpx;
				height: 60rpx;
				border-radius: 6rpx;
				color: #000;
				@include flexCenterCenter;

				text {
					font-size: 32rpx;
					font-weight: bolder;
				}
			}
		}
	}
</style>
